@charset'UTF-8';
 /**
 * 黑五页
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/11/12
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';

 @import'../_components/column.scss';

 @import'../assets/ymtUI.scss';
 @import'../assets/ymt_components.scss';

 @import'./_proList.scss';

 $rem: 1rem/32;

 $imgPath:'/images/black_five/';
 $imgPath:'http://staticontent.ymatou.com/images/black_five/';
@include column('.bf-',2,$rem*8);
.mask{
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;

    background: rgba(0,0,0,.7);
    &.open
    {
        display: block;
    }
}


.bg__full{
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
}

.bf-container{
    background:#e7e7e7;
}

.bf-banner{
    background-image:url(#{$imgPath}bf/bf_banner.jpg);
    height:$rem*500;
    background-color:#d42a51;
    .activity-detail{
        font-size:$rem*24;
        color:#fff;
        padding:$rem*10 $rem*25;
        border-top-right-radius:$rem*44;
        border-bottom-right-radius:$rem*44;
        background-color:rgba(0,0,0,.4);
        position:absolute;
        top:$rem*415;
        left:0;
        &:after{
            content:'?';
            display:inline-block;
            font-size:$rem*17;
            width:$rem*25;
            height:$rem*25;
            border:1px solid #fff;
            border-radius:50%;
            text-align:center;
            margin-left:$rem*5;
        }
    }
}

.bf-coupon{
    background-image:url(#{$imgPath}bf/bf_coupon.jpg);
    height:$rem*136;
    background-color:#faec4b;
}

//秒杀
.bf-seckill{
    &-wrapper{
        background-color:#cf2541;
        padding-bottom:$rem*40;
        margin-bottom:$rem*5;
        .bf-area-hd{
            background-image:url(#{$imgPath}bf/bf_seckill.jpg);
            height:$rem*120;
            color:#fff;
            font-size:$rem*26;
            position:relative;
            span{
                position: absolute;
                bottom:$rem*12;
                right:$rem*15;
            }
            i{
                background-color:#fff;
                border-radius:50%;
                display:inline-block;
                width:$rem*20;
                height:$rem*20;
                line-height:$rem*20;
                text-align:center;
                margin-left:$rem*3;
                color:#cf2541;
                font-size:$rem*25;
            }
        }
        .bf-area-bd{
            //padding:0 $rem*10;
            height:$rem*390;
            overflow:hidden;
        }
        .before-mask{
            position:absolute;
            height:100%;
            width:100%;
            z-index:2;
            top:0;
            left:0;
            color:#fff;
            padding-top:$rem*130;
            font-size:$rem*40;
            text-align:center;
            background:rgba(0,0,0,.5);
            display:none;
        }
        &.before{
            .before-mask{
                display:block;
            }
        }
    }

    &-list{
        height:100%;
          white-space: nowrap;
          width:100%;
    }
    &-item{
        display:inline-block;
        height:100%;
        width:100%;
        position:relative;
    }

    &-pro{
        height:100%;
    }
}
//美国来了
.bf-coming{
    margin-bottom:$rem*5;
    .pic{
        background-image:url(#{$imgPath}bf/bf_coming.jpg);
        height:$rem*372;
    }
    .text{
        background:#1f1f20;
        color:#fff;
        height:$rem*50;
        line-height:$rem*50;
        text-align:center;
        font-size:$rem*24;
    }
}

.seller-coupon{
    background-color:#ffd801;
    padding:$rem*34 $rem*10;
    .bf-area-hd{
         //background-image:url(#{$imgPath}country/seller-title.jpg);
         height:$rem*131;
    }
    .bf-area-bd{
        @include clearfix();
        &>div{
            width:$rem*175;
            height:$rem*302;
            float:left;
            margin-right:$rem*10;
            &:nth-child(1){
                //background-image:url(#{$imgPath}country/seller-coupon1.jpg);
            }
            &:nth-child(2){
                //background-image:url(#{$imgPath}country/seller-coupon2.jpg);
            }
            &:nth-child(3){
                //background-image:url(#{$imgPath}country/seller-coupon3.jpg);
            }
            &:nth-child(4){
                //background-image:url(#{$imgPath}country/seller-coupon4.jpg);
                margin-right:0;
            }
        }
    }
}


//全球好货
.bf-goods{
    background:#fff;
    padding:0;
    overflow:hidden;
    .module-hold{
        height:$rem*600;
    }
    .see-more{
        color:#000;
        border-color:#6a6a6a;

    }
    .bf-area-ft{
        background:#eeeeee;
        padding:$rem*18 $rem*10 $rem*35;
    }
}

//1配7 全球好货
.goods-item{

}
.goods-banner{
    height:$rem*400;
    //border:1px solid #ffd9df;
    position:relative;
    &:after{
        content:'';
        border:$rem*12 solid transparent;
        margin-left:$rem*-6;
        position:absolute;
        left:50%;
        bottom:0;
        border-bottom-color:#fff;
    }
}

.goods-pic{
    &-list{
        background:#f8f8f8;
        padding:$rem*18 0;
        white-space: nowrap;
    }
    &-item{
        background:#fff;
        margin-right:$rem*8;
        display:inline-block;
        text-align:center;
        width:$rem*200;
        font-size:$rem*22;
        color:#3c3c3c;
        vertical-align: top;
        h4{
           height: $rem*33;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
        }
        .pic{
            height:$rem*200;
            line-height:$rem*200;
            margin-bottom:$rem*15;
        }
        .pirce{
            color:#c33;
            font-size:$rem*14;
            strong{
                font-size:$rem*20;
            }
        }
         .original-price{
            font-size:$rem*12;
            color:#999;
            strong{
                font-size:$rem*15;
            }
         }
    }
}

.bf-mall{
    background-color:#cf2541;
    .bf-area-hd{
        .pic{
            height:$rem*290;
             background-image:url(#{$imgPath}bf/nordstrom.jpg);
        }
        .txt{
            font-size:$rem*24;
            color:#fff;
            padding:$rem*5 $rem*38;
        }
    }
    .bf-area-bd{
        padding:$rem*10 $rem*8;
    }
    .bf-area-ft{
        padding-bottom:$rem*30;
    }

}

.seller-saohuo{
    height:$rem*426;
}

.bf-brand{
    background:#cf2541;
    padding-top:$rem*20;
    .bf-area-hd{
        height:$rem*76;
        margin-bottom:$rem*15;
    }
    .bf-area-bd{
        padding:0 $rem*10;
    }
    .bf-area-ft{
        color:#fff;
        font-size:$rem*30;
        text-align:center;
        strong{
            color:#ffff66;
        }
    }
}

//查看更多
.see-more{
    height:$rem*63;
    line-height:$rem*63;
    border:1px dashed #fff;
    border-radius:$rem*63;
    text-align:center;
    font-size:$rem*30;
    color:#fff;
}

//
@include productList(#cf2541,#2d2d2d);


.bf-tab{
    position:fixed;
    left:0;
    right:0;
    bottom:$rem*7;
    font-size:$rem*25;
    height:$rem*250;
    transition: transform 0.25s ease-in-out;
    will-change:transform;
    z-index:3;
    &.fixed-out{
        transform: translate(0, 100%);
        bottom:0!important;
    }
    &-wrapper{
        height:$rem*200;
        position:relative;
        background-color: #fff;
        &.show{
            .bf-tab{
                transform: translate(0, 100%);
                bottom:0!important;
            }
        }

    }
  &-hd{
        position:relative;
        height:$rem*144;
        z-index:2;
        left:0;
        .ymt-person{
            z-index:2;
            position:relative;
            transition: transform 0.8s ease-in-out;
            will-change:transform;
            background-image:url(#{$imgPath}person.png);
            background-size: contain;
            width:$rem*101;
            height:$rem*144;
            display:block;
            top:$rem*10;
            left:$rem*10;
        }
        span{//小洋人
            z-index:2;
            position:relative;
            transition: left 0.55s ease-in-out;
            /* &:before{
                content:'';
                position:absolute;
                left:0;
                top:0;
                width:$rem*38;
                height:$rem*68;
                animation: sign-sway 3s infinite alternate;
                will-change:transform;
                background-image:url(#{$imgPath}balloon.png);
                @extend .bg__full;
            }
            &:after{
                content:'';
                position:absolute;
                left:$rem*26;
                //bottom:$rem*-12;
                top:$rem*28;
                background-image:url(#{$imgPath}people.png);
                width:$rem*70;
                height:$rem*70;
                 @extend .bg__full;
            } */
        }

        &:after{
            content:'';
            background-image:url(#{$imgPath}bf/bf_tab_leftIcon.png);
            @extend .bg__full;
            position:absolute;
            width:$rem*191;
            height:$rem*84;
            right:$rem*15;
            bottom:$rem*0;
        }
    }
    &-bd{
        position:relative;
     /*    display: -moz-box;
            display: -webkit-box;
            display: box; */
        &>ul{
            position:relative;
            bottom:0;
            /* -moz-box-flex: 1;
            -webkit-box-flex: 2;
            box-flex: 1; */
            height:$rem*100;
            line-height:$rem*93;
            color:#fff;
            text-align:center;
            background: #393536;
            border-radius:$rem*100;
            border:2px solid #5b5651;
            box-shadow: 0 $rem*9 #393536;
            background-image:url(#{$imgPath}bf/tab_border.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
        }

        li{
            float:left;
            overflow:hidden;
            //a{
                display:block;

                //padding:0 $rem*12;
                height:100%;
                width:20%;
                color:#fff;
                position:relative;
                z-index: 3;
                //text-shadow:0 0 $rem*10 #FFB400;
                font-size: $rem*28;
                font-weight:bold;
           //}
            &:first-child{
                border-top-left-radius:$rem*94;
                border-bottom-left-radius:$rem*94;
            }
            &.active{
               //text-shadow:0 0 $rem*5 #ffe32a;
               color:#ffe32a;
            }
        }
    }
/*
    //active坐标
    .coordinate{
        background:#e7392d;
        position:absolute;
        width:$rem*150;
        height:$rem*94;
        top:0;
        left:0;
        transition: all 0.25s ease-in-out;
        &.first{
            border-top-left-radius:$rem*94;
            border-bottom-left-radius:$rem*94;
        }
        &.last{
            border-top-right-radius:$rem*94;
            border-bottom-right-radius:$rem*94;
        }
    } */
    .bear-header{
        background-image:url(#{$imgPath}bear-header.png);
        width:$rem*101;
        height:$rem*110;
        @extend bg__full;
        z-index: 2;
        right: 0;
        bottom: $rem*10;
        display:block;
        position:relative;
    }
}
.module-hold{
    background-image:url(#{$imgPath}loading_cut.jpg);
    background-color:#fff;
    height:$rem*300;
    @extend .bg__full;
}


.img-hold{
    background-image:url(#{$imgPath}loading_cut.jpg);
}

//领取礼包
.receive-package{
    &.succ{
        .package-bg{
            background-image:url(#{$imgPath}bg-dialog-succ.png);
        }
        .share-btn{
            left:50%;
            transform:translate(-50%);
              display: block;
        }
        .share-tools{
            display:none;
        }
    }
    &-mask{
        @extend .mask;
    }
    &-dialog{

        @extend .bg__full;
        width:$rem*750;
        height:$rem*520;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 100;
        margin-left:-$rem*375;
        margin-top:-$rem*298;
        background-position: top;
        display:none;
        .package-bg{
            width:$rem*648;
            height:$rem*393;
            margin:0 auto;
            background-image:url(#{$imgPath}bg-dialog.png);

        }
        .close-flag{
            position:absolute;
            width:$rem*50;
            height:$rem*50;
            line-height:$rem*50;
            border:$rem*3 solid #fff;
            border-radius:50%;
            color:#fff;
            background:#000;
            text-align:center;
            right:$rem*55;
            top:$rem*20;
        }
        &.open{
            display:block;
        }
        &-bd{
            position:relative;
            height: 100%;
        }
        .succ-btn{
            display:none;
        }
        .share-btn,
        .close-btn{
             position:absolute;
             width:$rem*313;
             height:$rem*96;
             line-height:$rem*96;
             bottom:0;
             border-radius:$rem*16;
             font-size:$rem*55;
             color:#410005;
             text-align:center;
             font-weight:bold;
             &.center-btn{
                 right: 50%;
                 transform: translate(50%,0);
             }
        }
        .close-btn{
            right:$rem*46;
            background-color:#fdd4da;
            box-shadow:0 $rem*14 #fba5b3;
        }
        .share-btn{
            color:#fff;
            left:$rem*56;
            background-color:#fe4855;
            box-shadow:0 $rem*14 #b83740;
        }
    }
}

.mask{
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;

    background: rgba(0,0,0,.7);
    &.open
    {
        display: block;
    }
}

.ios{
    .bf-catalog-tab{
        top:$rem*150;
    }
}
.bf-catalog-tab{
    background:#3d3d3d;
    width:100%;
    position:fixed;
    top:0;
    color:#fff;
    left:0;
    text-align:center;
    font-size:$rem*20;
   // display:none;
    height:$rem*76;
    transition: transform 0.25s ease-in-out;
    transform: translate(100%, 0);
    z-index: 99;
    box-shadow:$rem*3 0 $rem*5 rgba(0,0,0,.6);
    &.show{
        display:block;
        transform: translate(0, 0);
    }
    ul{
        overflow: hidden;
    }
    &.col6{
      li,
      .coordinate{
        width:16.66%;
      }
    }
    &.col4{
      li,
      .coordinate{
        width:25%;
      }
    }
    li{
      float:left;
      line-height:$rem*76;
      &>span{
        position:relative;
        z-index:101;
      }
      &.row2{
          line-height: 1.5;
          padding-top: $rem*7;
      }
    }
    .bf-catalog-wrapper{
        position:relative;
    }
    .coordinate{
       background:#d1213d;
        position:absolute;
        width:25%;
        height:$rem*76;
        top:0;
        left:0;
        z-index:100;
        transition: all 0.25s ease-in-out;
    }
}
.ios-bartools{
    height:$rem*150;
    &-wrapper{
        background: rgba(255, 255, 255, 0.92);
        height:$rem*150;
        z-index:9999;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        border-bottom:$rem*2 solid rgba(0,0,0,.5);
        padding-top:$rem*70;
        h2{
            font-size:$rem*38;
            text-align:center;
            color:#333;
            font-weight:bold;
        }
    }
}
